<template>
  <!-- 往下滑 不显示 isVisiable = false  选第二个  设置为不可显示的  -->
  <!-- 往上滑  显示  isVisiable = true   选第一个  设置为可见显示的  -->
  <!-- <div id="header" :class="isVisiable ? 'header-navigation slideDown': 'header-navigation slideUp'"> -->
  <div>
    <div id="header" v-show="isVisiable">
      <div class="navigation">
        <!-- 网站名logo -->
        <div class="logo">
          <router-link to="/" style="width: 100%; height: 60px">
            <img src="../images/logo.png" />
            <!-- <a href="javascript:void(0);" v-if="info.name">{{ info.name }}</a> -->
          </router-link>
        </div>
        <div class="navigationbar">
          <!-- 菜单栏 -->
          <ul>
            <!-- 设置当前激活的效果 -->
            <li v-for="item in navigationList" :key="item.navigationId">
              <!--判断是否有下拉菜单-->
              <span v-if="item.childNar != null && item.childNar.length > 0">
                <!-- 下拉菜单 -->
                <el-dropdown
                  class="dropdown-pointer"
                  @command="handleCommand"
                  szie="small"
                >
                  <!-- 显示菜单名 是否存在子菜单  当前菜单下的子菜单-->
                  <span
                    :class="
                      item.navigationUrl == activeIndex ? 'active-index' : ''
                    "
                  >
                    {{ item.navigationName
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu
                    class="dropdown-pointer header-new-drop"
                    slot="dropdown"
                  >
                    <el-dropdown-item
                      class="dropdown-item dropdown-pointer"
                      :key="index"
                      :command="{subjectId: childItem.subjectId, subjectName: childItem.subjectName}"
                      v-for="(childItem, index) in item.childNar"
                    >
                      {{ childItem.subjectName }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
              <!--没有有下拉菜单 傻逼  这个只是显示而已 你这里循环干嘛   先我们循环一级菜单 然后里面判断 循环子菜单-->
              <!-- 添加当前激活对象 -->
              <span v-else>
                <router-link
                  :to="item.navigationUrl"
                  @click.native="changeActiveIndex(item.navigationUrl)"
                  :class="
                    item.navigationUrl == activeIndex ? 'active-index' : ''
                  "
                  class="navigationName"
                >
                  <i :class="['iconfont', item.navigationIcon]"></i>
                  {{ item.navigationName }}
                </router-link>
              </span>
            </li>
          </ul>
          <div class="search">
            <i class="iconfont search-pointer" @click="dialogVisible = true"
              >&#xe86e;</i
            >
          </div>
        </div>
      </div>
    </div>
    <Search
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog()"
    ></Search>
  </div>
</template>

<script>
import "@/assets/css/navbar.css";
import { selectNavigationBarList } from "../api/index.js";
import Search from "@/views/search/Search.vue";

export default {
  name: "navbar",
  components: {
    Search,
  },
  data() {
    return {
      avatar: "",
      isVisiable: true,
      activeIndex: "/article",
      navigationList: [],
      keyword: "",
      isSubject: false,
      dialogVisible: false,
    };
  },
  created() {
    this.getNavigationBarList();
    // 获取当前路径进行赋值
    this.getActiveIndex();
  },
  methods: {
    closeDialog() {
      console.log("接收");
      this.dialogVisible = false;
    },
    getActiveIndex() {
      this.activeIndex = this.$route.path;
    },
    searchArticle() {
      // 跳转到搜索页面 携带参数
      // 如果当前处于
      // 需要判断当前的route是否为search 避免重复跳转 不等于需要先跳转再发布
      // if (this.$route.path != "/search") {
      //   this.$router.replace({
      //     path: "/search",
      //     query: { keyword: this.keyword },
      //   });
      // }
      // 然后再发布数据
      this.$store.dispatch("setKeyword", this.keyword);
    },
    toSubject(subjectId) {},

    changeActiveIndex(activeIndex) {
      if (this.isSubject) {
        this.isSubject = false;
      }
      this.activeIndex = activeIndex;
      this.keyword = "";
    },

    getNavigationBarList() {
      selectNavigationBarList().then((response) => {
        this.navigationList = response.data;
      });
    },

    handleCommand(subjectId) {
      this.activeIndex = "/subject";
      // 如果是专栏页面  则不需要切换
      this.isSubject = true;
      // 跳转页面
      this.$router.push({ path: "/subject", query: { subjectId: subjectId } });
    },
  },
  mounted() {
    // 因为钩子函数中this 是指的window作用域  所以 需要转换为其他变量才能访问到data的数据
    var that = this;
    var offset = 300;
    var after = 0;
    window.addEventListener("scroll", function () {
      if (!that.isSubject) {
        let scrollTop = document.documentElement.scrollTop; //当前的的位置 0 10
        let scrollHeight = document.documentElement.scrollHeight; //最高的位置
        // if (scrollTop > offset) {
        //   that.isCdTopVisible = true;
        // } else {
        //   that.isCdTopVisible = false;
        // }  0
        if (scrollTop > after) {
          that.isVisiable = false;
        } else {
          that.isVisiable = true;
        }
        after = scrollTop;
      }
    });

    // 屏幕自适应
    window.onresize = () => {
      return () => {
        that.setSize();
      };
    };
  },
};
</script>

<style>
.active-index {
  color: pink;
}

.search-pointer {
  cursor: pointer; /*鼠标悬停变小手*/
}

.search-pointer:hover {
  color: #6ac5c5;
}

.dropdown-pointer {
  cursor: pointer; /*鼠标悬停变小手*/
}

.header-new-drop {
  min-width: 120px;
  position: absolute !important;
  top: 40px !important;
  left: 20% !important;
}

::v-deep .el-dropdown-menu {
  min-width: 120px;
  position: absolute !important;
  top: 35px !important;
  left: -45px !important;
}

/* 消除小三角 */
.el-popper[x-placement^="bottom"] .popper__arrow {
  border: none;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border: none;
}
</style>
